import React from "react";
import {ProjectListScreen} from 'screens/project-list'
import {useAuth} from "./context/auth-context";
import {Button, Dropdown, Menu} from "antd";
import styled from "@emotion/styled"
import {ButtonNoPadding, Row} from "./components/lib";
import {ReactComponent as Softwarelogo} from 'assets/software-logo.svg'
import {Routes, Route, Navigate} from "react-router";
import {BrowserRouter as Router} from "react-router-dom";
import {ProjectScreen} from "./screens/project";
import {resetRoute} from "./utils";
import {ProjectModal} from "./screens/project-list/project-modal";
import {ProjectPopover} from "./components/project-popover";
import {UserPopover} from "./components/user-popover";

/**
 * grid和flex各自的应用场景
 * 1. 要考虑，是一维布局 还是 二维布局
 * 一般来说，一维布局用flex，二维布局用grid
 * 2. 是从内容触发还是从布局触发？
 * 从内容触发：先有一组内容（数量一般不固定），然后希望他们均匀的分布在容器中，由内容决定所占的空间
 * 从布局出发：先规划网格（数量一般比较固定），然后再把元素往里填充
 * 从内容出发，用flex
 * 从布局出发，用grid
 * */
export default () => {
    return (
        <Container>
            <Router>
                <PageHeader/>
                <Main>
                    <Routes>
                        <Route path={'/projects'} element={<ProjectListScreen />}></Route>
                        <Route path={'/projects/:projectId/*'} element={<ProjectScreen />}></Route>
                        <Navigate to={'/projects'}/>
                    </Routes>
                </Main>
                <ProjectModal />
            </Router>
        </Container>
    )
}

const PageHeader = () => {
    return <Header between={true}>
        <HeaderLeft gap={true}>
            <ButtonNoPadding style={{padding: 0}} type={'link'} onClick={resetRoute}>
                <Softwarelogo width={'18rem'} color={'rgb(38, 132, 255)'}></Softwarelogo>
            </ButtonNoPadding>
            <ProjectPopover />
            <UserPopover />
        </HeaderLeft>
        <HeaderRight>
            <User></User>
        </HeaderRight>
    </Header>
}

const User = () => {
    const {logout, user} = useAuth()
    return <Dropdown overlay={
        <Menu>
            <Menu.Item key={'layout'}>
                <Button type={"link"} onClick={logout}>登出</Button>
            </Menu.Item>
        </Menu>
    }>
        <Button type={"link"} onClick={e => e.preventDefault()}>
            Hi, {user?.name}
        </Button>
    </Dropdown>
}

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr;
  grid-template-areas:
  "header"
  "main"
  ;
  height: 100vh;
`
// grid-area 用来给grid子元素起名字
const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`
const HeaderLeft = styled(Row)``
const HeaderRight = styled.div``
const Main = styled.main`
  grid-area: main;
  display: flex;
  overflow: hidden;
`
